 <template>
	 <view>
        <scroll-view class="grace-tab-title grace-center" scroll-x="true" id="grace-tab-title">
            <view v-for="(tab, index) in tabs" :key="index" :class="[tabCurrentIndex == index ? 'grace-tab-current' : '']" :id="'tabTag-'+index" @tap="tabChange">{{tab.name}}</view>
        </scroll-view>
        <swiper class="grace-tab-swiper-full" :current="swiperCurrentIndex" @change="swiperChange" :style="{height:tabHeight+'px'}">
            <!-- 循环新闻项目 -->
            <swiper-item v-for="(news, newsIndex) in newsAll" :key="newsIndex">
                <scroll-view scroll-y="true" :data-scindex="newsIndex" @scrolltolower="scrollend">
                    <view class="grace-news-list" style="padding:25upx; width:700upx;">
                        <navigator :url="'xiangqing?goodsId='+item.objectId" hover-class="navigator-hover" v-for="(item, index) in news" :key="index">
						        <view class="grace-news-list-title">
						            	<view class="mes">
						            		<img :src="item.goodsImgList[0].url" alt="">
						            		<view class="right">
						            			<p class="p2">{{item.goodsName}}</p>
						            			<p class="p3">{{item.goodsSellpoint}}</p>
						            			<p class="p4">￥{{item.goodsPrice}}</p>
						            			<!-- <span class="span1">单件￥20</span> -->
						            			<P class="p5">{{item.goodsBrandName}}</P>
						            			<span class="span2">{{item.goodsCommentnum}}条评价 {{item.feedback}}好评</span>
						            		</view>
						            	</view>
						        </view>
								</navigator>
                    </view>
                    <graceLoading :loadingType="tabs[newsIndex].loadingType"></graceLoading>
                </scroll-view>
            </swiper-item>
        </swiper>
    </view>	
		
		
</template>

<script>
var _self;
//默认新闻数据（来自api请求）
//每个选项下面的新闻列表
//对应下面3个标签的新闻内容数据
import graceLoading from "../../static/graceUI/components/graceLoading.vue"
export default {
    data() {
        return {
			datas:[],
            tabCurrentIndex: 0,
            swiperCurrentIndex: 0,
            tabHeight : 300,
            tabs: [
                //标签名称 , 分类 id , 加载更多, 加载的页码
                { name: '全部', id: 'guanzhu' , loadingType : 0, page : 1},
                {url:'../../static/7_03.gif', name: '桶装水', id: 'tuijian', loadingType: 0, page: 1},
                {url:'../../static/7_05.gif', name: '瓶装水', id: 'tiyu', loadingType: 0, page: 1},
				{url:'../../static/7_07.gif', name: '饮用水', id: 'tiyu', loadingType: 0, page: 1}
				
            ],
            newsAll: [
				[],[],[],[]
			]
        }
    },
    onLoad:function(){
        _self = this;
			uni.request({
					url:'https://www.zunyishengshui.com/maishui/goods/selectAllGoods',
					method:'POST',
						data:{
							goodsType:"12321312312313"
						},
					header:{
						
						'Content-Type': 'application/x-www-form-urlencoded', 
					},
					success: (res) => {
						console.log("成功");
						console.log(res);
						this.text = 'request success';
						this.datas = res.data.data;
						for (var i = 0;i < this.datas.length;i++){
							if (this.datas[i].goodsType == "1"){
								this.newsAll[1].push(this.datas[i])
							}else if (this.datas[i].goodsType == "2"){
								this.newsAll[2].push(this.datas[i])
							}else if (this.datas[i].goodsType == "3"){
								this.newsAll[3].push(this.datas[i])
							}
							this.newsAll[0].push(this.datas[i])
						}
						console.log(this.newsAll)
							
						
						
			},
			
			fail:err=>{
				console.log(err);
			},
			complete:()=>{}
				});	
				
		
	},
    onReady: function () {
        //获取屏幕高度及比例
        var winInfo = uni.getSystemInfo({
            success: function (res) {
                var windowHeight = res.windowHeight;
                //获取头部标题高度
                var dom = uni.createSelectorQuery().select('#grace-tab-title')
                dom.fields({size: true}, res2 => {
                    if(!res2){return ;}
                    //计算得出滚动区域的高度
					console.log(_self.tabHeight)
                    _self.tabHeight = windowHeight - res2.height;
                }).exec();
            }
        });
    },
     methods:{
            tabChange: function (e) {
                var index = e.target.id.replace('tabTag-', '');
                this.swiperCurrentIndex = index;
                this.tabCurrentIndex    = index;
            },
            swiperChange: function(e){
                var index = e.detail.current;
                this.tabCurrentIndex = index;
            },
            //每个选项滚动到底部
            scrollend:function(e){
				
//                 //获取是哪个选项滚动到底？
//                 var index = e.currentTarget.dataset.scindex;
//                 console.log(index);
//                 //可以利用 tabs 携带的分类id 与服务器交互请求对应分类的数据
//                 console.log(this.tabs[index].id);
//                 //加载更多的演示
//                 //判断当前是否正在加载
//                 if (this.tabs[index].loadingType === 1){
//                     return false;
//                 }
//                 //判断是否是最后一页
//                 console.log(this.tabs[index].page)
//                 if (this.tabs[index].page > 3){
//                     this.tabs[index].loadingType = 2;//全部
//                     return ;
//                 }
//                 this.tabs[index].loadingType = 1;//加载中
            }
        },
        components:{
            graceLoading
        },
    	
    }
    	
</script>

<style>
page{background:#FFFFFF;}
.img{
		width: 95%;
		height: 100%;
		margin:auto;
		margin-left: -0.25rem;
		margin-top:1rem;
	}
	*{
			box-sizing: border-box;
			}
	.v1{
		margin-left: 1.25rem;
		display: flex;
	}
	.v1 img{
		/* left: 2.38rem;
		top: 5.94rem; */
		width: 20.56rem;
		height: 20.75rem;
		margin-top:1.88rem;
		border-radius: 0.31rem;
		margin:auto;
	    
	}
	.grace-news-list-title{
		
		margin-top:-1.4rem;
	}
	.mes{
		margin-left: 0.85rem;
		
		width: 100%;
		height: 8rem;
		border-bottom:1px solid #E0E0E0;
	}
	
	.mes .right{
		margin-left: 7rem;
		margin-top:-9rem;
		
	}
	.mes img{
		width: 5.8rem;
		height: 5.8rem;
		margin-top: 2rem;
	}
	
	/* .mes .right img{
		display: block;
		left: 8.88rem;
		top: 8rem;
		width: 0.96rem;
		height: 0.75rem;
		/* margin-top:40px; */
	
	
	.mes .right .p1{
		margin-top: -0.81rem;
		margin-left: 0.96rem;
		left: 3.06rem;
		top: 28.13rem;
		height: 1.19rem;
		line-height: 1.06rem;
		color: rgba(187, 187, 187, 1);
		font-size: 0.75rem;
		text-align: left;
		font-family: PingFangSC-regular;
	
	
	}
	.mes .right .p2{
	
		width: 18.88rem;
		height: 2.81rem;
		line-height: 1.38rem;
		color: rgba(16, 16, 16, 1);
		margin:auto;
		margin-top:2.8rem;
		font-size: 0.9rem;
		text-align: left;
		font-family: PingFangSC-regular;
	
	
	}
	.mes .right .p3{
		left: 1.44rem;
		top: 33.38rem;
		/* width: 7.56rem; */
		height: 1rem;
		line-height: 1rem;
		color: rgba(171, 171, 171, 1);
		font-size: 0.75rem;
		text-align: left;
		font-family: PingFangSC-regular;
		margin-top:-0.5rem;
	
	
	}
	.mes .right .p4{
	    left: 8.75rem;
		top: 12.69rem;
		/* width: 3.31rem; */
		height: 1.63rem;
		line-height: 1.63rem;
		color: rgba(59, 156, 219, 1);
		font-size: 1.1rem;
		text-align: left;
		font-family: PingFangSC-regular;
	
	}
	.mes .right .span1{
		left: 11.56rem;
		top: 9.81rem;
		/* width: 3.5rem; */
		height: 1rem;
		line-height: 1rem;
		color: rgba(171, 171, 171, 1);
		font-size: 0.71rem;
		text-align: left;
		font-family: PingFangSC-regular;
		border-left: 1px soild #eee;
		float:left;
		margin-top:-1.25rem;
		margin-left:2.81rem;
		
	}
	.mes .right .p5{
		left: 0.64rem;
		top: 14.37rem;
		width: 1.68rem;
		height: 1rem;
		line-height: 1rem;
		color: rgba(59, 156, 219, 1);
		font-size: 11px;
		text-align: left;
		font-family: PingFangSC-regular;
		border:1px solid #3B9CDB;
	
	}
	.mes .right .span2{
		left: 11.31rem;
		top: 14.38rem;
		width: 9.44rem;
		height: 1rem;
		line-height: 1rem;
		color: rgba(171, 171, 171, 1);
		font-size: 11px;
		text-align: left;
		font-family: PingFangSC-regular;
		margin-top:-0.94rem;
		margin-left: 2.35rem;
		float: left;
	}
	.v2{
		display: flex;
	}
	
	.line{
		width: 100%;
		height: 0.31rem;
		background-color: #F0F0F0;
		margin-top:0.63rem;
		
	}
	.btn1,.btn2,.btn3{
		width: 5.63rem;
		height: 2.13rem;
		line-height: 2.13rem;
		border-radius: 0.31rem;
		background-color: rgba(255, 255, 255, 1);
		color: rgba(16, 16, 16, 1);
		font-size: 0.75rem;
		/* float: left; */
		/* justify-content: space-around; */
		border:rgb(187, 187, 187) 1px solid;	
		margin-top:1.68rem;
		margin-left:0.75rem;
		border:none;
		
	}
	.btn1{
		/* margin-left: 1.06rem; */
		background-color: #3B9CDB;
		color: #fff;
	}
	.btn2{
		/* margin-left: 0.62rem; */
		
	}
	.btn3{
		/* margin-left: 0.62rem; */
		
	}
	/* a:active{
		margin-left: 0.62rem;
		background-color: #3B9CDB;
		color: #fff;
	} */
	.v3 .img1{
		left: 0.88rem;
		top: 27.65rem;
		width: 4.38rem;
		height: 4.38rem;
		margin-top:1.38rem;
		margin-left:0.88rem;
	}
	.v3 .shouji{
		left: 5.06rem;
		top: 27.81rem;
		width: 4.75rem;
		height: 1.25rem;
		color: rgba(16, 16, 16, 1);
		font-size: 14px;
		text-align: left;
		font-family: PingFangSC-regular;
		float:right;
		margin-right:13rem;
		margin-top:2.06rem;
	}
	.v3 .date{
		left: 11.25rem;
		top: 54.25rem;
		width: 4.63rem;
		height: 1.06rem;
		color: rgba(153, 153, 153, 1);
		font-size: 12px;
		text-align: left;
		font-family: PingFangSC-regular;
		float: right;
		margin-right: 7.56rem;
		margin-top:-3.94rem;
	}
	.v3 .xing .img2{
		left: 21.5rem;
		top: 52.81rem;
		width: 0.94rem;
		height: 0.94rem;
		background-color: rgba(255, 198, 24, 1);
		float:right;
		margin-right:1rem ;
		margin-top:4.06rempx;
	
	}
	.v3 .img3{
		left: 4.88rem;
		top: 46.88rem;
		width: 1.25rem;
		height: 1.25rem;
		background-color: rgba(59, 156, 219, 1);
		display: block;
		margin-top:-1.88rem;
		margin-left:5.5rem;
		/* float: right; */
	
	}
	.v3 .water{
		left: 6.38rem;
		top: 46.81rem;
		width: 5.25rem;
		height: 1.25rem;
		color: rgba(59, 156, 219, 1);
		font-size: 14px;
		text-align: left;
		font-family: PingFangSC-regular;
		margin-left: 7.56rem;
		margin-top:-1.32rem;
	
	}
	.v3 .text{
		left: 0.9rem;
		top: 64.06rem;
		width: 10.5rem;
		height: 1.25rem;
		color: rgba(16, 16, 16, 1);
		font-size: 14px;
		text-align: left;
		font-family: PingFangSC-regular;
		margin-top:0.75rem;
		margin-left: 0.94rem;
	}
	.v4{
		width: 100%;
		height: 0.125rem;
		background-color:#F0F0F0;
		margin-top:0.81rem;
	}
	.v5{
		width: 100%;
		height: 3rem;
		bottom:0;
		margin-top:0.625rem;
		background-color: #fefefe;
		position: fixed;
		/* z-index:999; */
	}
	.v5 .btn4{
		width: 2.19rem;
		height: 1.87rem;
		float: left;
		background-color: #fefefe;
		border:none;
		border:1px solid #999999;
		border-radius: none;
		margin-left: 0.625rem;
		border-radius: 20% 0 0 20% ;
		margin-top:0.625rem;
		
	}
	.v5 .btn4 p{
		text-align: center;
		line-height: 1.88rem;
	
	}
	.v5 .span1{
		width: 2.19rem;
		height: 1.88rem;
		
	}
	.v5 .btn5{
		width: 2.19rem;
		height: 1.88rem;
		text-align: center;
		float: left;
		
		background-color: #fefefe;
		/* border:none; */
		border-right: none;
		border:1px solid #999999;
		border-radius:0 20% 20% 0;
		margin-top:0.625rem;
		
		
	}	
	.v5 .btn5 p{
		text-align: center;
		line-height: 1.88rem;
		
	}
	.v5 .p1{
		width: 2.19rem;
		height: 1.88rem;
		float: left;
		text-align: center;
		border-top:1px solid #999999;
		border-bottom:1px solid #999999;
		margin-top:0.625rem;
	}
	.v5 .btn6{
		margin-top: -5rem;
		width: 8.13rem;
		height: 3rem;
		background-color: #ff5000;
		line-height: 3rem;
		float: right;
		color: #FFFFFF;
		border-left: none;
		border:1px solid #999999;
		
		
	}
	.grace-form{
		border:none;
		margin-top:-1rem;
	}
	/* .grace-items{
		margin-top:-0.5rem;
	} */
	.v5 .p2{
		font-size: 16px;
		color: #fd0000;
		margin-top:0.625rem;
		margin-left:12.5rem;
	}
	/* .v5 .add{
		width: 105px;
		height: 37px;
	} */
	
	.space{
		width: 100%;
		height: 5rem;
		background-color: #FFFFFF;
	}
	/* #tabTag-1{
		margin-left:0.5rem ;
	}
	#tabTag-2{
		margin-left:0.5rem ;
	}
	#tabTag-3{
		margin-left:0.5rem ;
	}
	#tabTag-4{
		margin-left:0.5rem ;
	} */
	.grace-ellipsis text{
		opacity: 0;
	}
	
	
	
	
</style>
